<?php 
require 'header.php';   
?>
<?php
session_start();
if ($_GET['action'] == 'reg') {
 
 include("connect.php");
 $username=$_POST['username'];
$pwd=$_POST['pwd'];


$tel=$_POST['tel'];
$Email=$_POST['Email'];

 $sql=mysqli_query($conn,"select * from userinfo where username='".$username."'");
$info=mysqli_fetch_array($sql);
if($info==true)
 {
 
  echo "<script>alert('用户名已经存在，请重新输入!');window.location='UserReg.php';</script>";
   
    exit;
 }
 else
 {$sql="insert into userinfo (username,pwd,tel,Email ) values ('$username','$pwd','$tel','$Email')";
    mysqli_query($conn,$sql);
	$_SESSION['username']=$username;
   echo "<script>alert('恭喜，注册成功!');window.location='index.php';</script>";
 }
 }
 ?>
	<!-- 注册提交部分 -->
<div class="container" style="margin-top: 30px;" >
	<div class="card mb-3 ">
	  <div class="card-body" style="background-color: #B3E1FB;">
	    <h2 class="card-title">注册</h2>
	<div class="row"  id="none">
	<div class="col-1">
			<!-- 撑中间 -->
		</div>
		<div class="col-10">
		
		<div class="card border border-light" >
		  <div class="row no-gutters">
		    <div class="col-md-4">
		      <img src="./img/50.jpg" class="card-img" height="100%">
		    </div>
		    <div class="col-md-8">
		      <div class="card-body" style="background-color: #B3E1FB;">
		        <form method="post" name="login" action="UserReg.php?action=reg">
		          <div class="form-group">
		            <label>用户名</label>
		            <input maxlength="5" class="form-control" type="text" name="username" autocomplete="off" placeholder="请输入用户名"  required="required" aria-describedby="userHelp">
		            <small id="userHelp" class="form-text text-muted">为自己取个名字吧,最多5个字符哦！</small>
		          </div>
		          <div class="form-group">
		            <label >密码</label>
		            <input  class="form-control" v-bind:class="{'is-valid' : pwdv,'is-invalid' : !pwdv&&pwd!=''}" v-model="pwd" type="password" name="pwd" autocomplete="off" placeholder="请输入密码" required="required" aria-describedby="pwdHelp">
		           
		        	<small v-if="pwdv==false&&pwd!=''" id="pwdHelp" class="form-text text-danger">密码必须包括数字，字母或特殊符号，长度为6-16</small>
		        	<small v-else-if="pwdv==true&&pwd!=''" id="pwdHelp" class="form-text text-success">密码格式正确</small>
		        	<small v-else-if="pwd==''" id="pwdHelp" class="form-text text-muted">请设置密码</small>
		          </div>
		          <div class="form-group">
		            <label>重新输入密码</label>
		            <input  class="form-control"type="password" v-bind:class="{'is-valid' : pwd2==pwd&&pwd!='','is-invalid' : pwd2!=pwd}"   v-model="pwd2" autocomplete="off" placeholder="请输入密码" required="required" aria-describedby="repwdHelp">
		            <small v-if="pwd==pwd2&&pwd!=''" id="repwdHelp" class="form-text text-success">两次密码一致</small>
		        	<small  v-else-if="pwd!=pwd2" id="repwdHelp" class="form-text text-danger">两次密码不一致</small>
		        	<small  v-else-if="pwd==''" id="repwdHelp" class="form-text text-muted">请再次输入密码</small>
		          </div>
		          <div class="form-group">
		            <label>电话</label>
		            <input  class="form-control" v-bind:class="{'is-valid' : phonev,'is-invalid' : !phonev&&phone!=''}"  v-model="phone"  type="text" name="tel" autocomplete="off" placeholder="请输入电话" required="required" aria-describedby="phHelp">
		            <small  v-if="phonev==false&&phone!=''"  id="phHelp" class="form-text text-danger">电话长度或格式有误</small>
		        	 <small  v-else-if="phonev!=false&&phone!=''"  id="phHelp" class="form-text text-success">电话格式正确</small>
		        	  <small  v-else-if="phone==''"  id="phHelp" class="form-text text-muted">请输入您的电话号</small>
		          </div>
		          <div class="form-group">
		            <label >Email</label>
		            <input type="email" class="form-control" v-bind:class="{'is-valid' : emailv,'is-invalid' : !emailv&&email!=''}" v-model="email" name="Email" autocomplete="off" placeholder="请输入Email" aria-describedby="emailHelp">
		           <small  v-if="emailv==false&&email!=''"  id="emailHelp" class="form-text text-danger">邮箱格式有误</small>
		            <small  v-else-if="emailv!=false&&email!=''"  id="emailHelp" class="form-text text-success">邮箱格式正确</small>
		        	<small v-else-if="email==''" id="emailHelp" class="form-text text-muted">请输入您的邮箱</small>
		          </div>
		        
		          <div class="form-group form-check">
		            <input type="checkbox" v-model="checked" class="form-check-input" id="exampleCheck1">
		            <label class="form-check-label" for="exampleCheck1">勾选即同意<span style="color: red;">《寻书网用户隐私协议》</span></label>
		          </div>
		          <button v-bind:type="{submit : gi}" v-on:click="go()" class="btn btn-primary">注册</button>
		        </form>
		     
		      </div>
		    </div>
		  </div>
		</div>
	</div>
	<div class="col-1">
			
		</div>
	</div>
	      <p class="card-text"><small class="text-muted">欢迎来到寻书网大家庭！</small></p>
	  </div>
	</div>


	
</div>
<script type="text/javascript">
		var v = new Vue({
			el: '#none',
			data: {
				phone: '',
				phonev: false,
				email: '',
				emailv: false,
				pwd: '',
				pwdv: false,
				pwd2: '',
				pwd2v: false,
				checked: false,
				gi:false
			},
			updated() {
				var re = /^1[3456789]\d{9}$/;
				let str = this.phone;
				if (re.test(str)) {
					this.phonev = true;
				} else {
					this.phonev = false;
				}
				var re2 = /^[\da-z]+([\-\.\_]?[\da-z]+)*@[\da-z]+([\-\.]?[\da-z]+)*(\.[a-z]{2,})+$/;
				let str2 = this.email;
				if (re2.test(str2)) {
					this.emailv = true;
				} else {
					this.emailv = false;

				}
				var re3 = /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,16}$/;
				let str3 = this.pwd;
				if (re3.test(str3)) {
					this.pwdv = true;
				} else {
					this.pwdv = false;
				}
			},
			methods: {
				go: function() {
					if (this.phonev == true && this.pwdv == true && this.emailv == true && this.checked == true) {
						
					} else {

						alert("有内容未填写完毕或未勾选条款!");
					}
				}
			}
		})
	</script>